<template>
  <div>
    <div ref="map" class="map" />
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china";
export default {
  name: "Map",
  data() {
    return {
      map: null,
      timer: null,
    };
  },
  methods: {
    initChart() {
      if (this.map) {
        // 销毁对象
        this.map.dispose();
      } // 基于准备好的dom，初始化echarts实例
      this.map = echarts.init(this.$refs.map, "light");
      var option = {
        title: {
          text: "中国地图",
          left: "center",
        },
        series: [
          {
            type: "map",
            map: "china",
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                name: "北京",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "天津",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "上海",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "重庆",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "河北",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "河南",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "云南",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "辽宁",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "黑龙江",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "湖南",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "安徽",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "山东",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "新疆",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "江苏",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "浙江",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "江西",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "湖北",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "广西",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "甘肃",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "山西",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "内蒙古",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "陕西",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "吉林",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "福建",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "贵州",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "广东",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "青海",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "西藏",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "四川",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "宁夏",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "海南",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "台湾",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "香港",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "澳门",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
              {
                name: "南海诸岛",
                value: 0 + Math.round(Math.random() * (50000 - 0)),
              },
            ],
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "城市名：{b}<br/>数据{c}人",
        },
        visualMap: {
          min: 0,
          max: 50000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      this.map.setOption(option);
    },
  },
  mounted() {
    //挂载完成
    this.initChart();
    window.addEventListener("resize", this.initChart, false);
    this.timer = setInterval(() => {
      this.initChart();
    }, 1000*60);
  },
  beforeDestroy() {
    // 销毁前
    window.removeEventListener("resize", this.initChart, false);
  },
  //销毁
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 800px;
}
</style>